<template>
  <div>

    <!-- <el-tab-pane label="参加的培训" name="first" style="position:static"> -->
    <!-- <el-form :inline="true" :model="trainSearch" class="user-search">

        <template>
          <el-select v-model="comment" placeholder="选择培训状态" @change="trainStatusChange">
            <el-option v-for="(item,index) in trainStatus" :key="index" :value="item.comment">
            </el-option>
          </el-select>
        </template>
        <el-form-item label="">
          <div class="block">
            <span class="demonstration">设置默认时间</span>
            <el-date-picker v-model="timeValue" type="datetime" placeholder="选择日期时间" default-time="12:00:00"
              @change="showtime">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="">
          <el-input size="small" v-model="trainSearch.trainName" placeholder="培训标题"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
      </el-form> -->

    <div
      style="height:250px;width:90%; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);left:50px;position: absoulte;top:60px"
      class="container" v-for="(trainItem,index) in trainList" :key="trainItem.id">
      <div style="float: left;width:25%;top:20px;position:relative;left:25px" class="row">
        <div class="col-sm" style="position: relative;top: 50px;">
          <el-image style="width: 100px; height: 100px" :src="trainItem.urlImg" :fit="fit"></el-image>
        </div>
      </div>
      <div style="float: left;width:25%;top:20px;position:relative;left:25px;top: 30px;">
        <div>
          <h3>{{trainItem.trainName}}</h3>
        </div>
        <div>
          <h6>课程描述:{{trainItem.des}}</h6>
        </div>

        <div style="position: static;">
          <h5>报名截止:{{trainItem.endTime.split("T")[0]}}</h5>
          <el-button type="success" round v-if="trainItem.isJoin == null " @click="joinTrain(trainItem.id)">开始报名
          </el-button>
          <el-button type="success" round v-if="trainItem.isJoin == 1">被拒绝 重新申请</el-button>
          <el-button type="success" round v-if="trainItem.isJoin == 2 " @click="goTrain(trainItem.id)">审核中</el-button>
          <el-button type="success" round v-if="trainItem.isJoin >= 3  " @click="goTrain(trainItem.id)">进入培训</el-button>
        </div>

      </div>
    </div>
    <!-- </el-tab-pane> -->

  </div>
</template>

<script>
  import userTrainApi from '@/api/user_train'
  import userApi from '@/api/user'
  import trainApi from '@/api/train'
  import 'bootstrap/dist/css/bootstrap.min.css'
  import 'bootstrap/dist/js/bootstrap.min.js'
  export default {
    data() {
      return {
        trainSearch: {
          name: '',
          userId: ''
        },
        trainList: [],
      }
    },
    created() {
      let user = JSON.parse(localStorage.getItem("userdata"))
      this.trainSearch.userId = user.id
      this.getTrainAllMsg()

    },
    methods: {
      // 获得所有培训信息
      getTrainAllMsg() {
        trainApi.getTrainAllMsg(this.trainSearch).then(response => {
          console.log(response);
          this.trainList = response.data
        }).catch()
      },
      //加入指定培训
      joinTrain(trainId) {
        userApi.addTrain(this.trainSearch.userId, trainId).then(response => {
          console.log(response);
          //刷新页面

          if (response.code == 200) {
            this.$message({
              message: '修改状态成功',
              type: 'success',
            })
            this.getTrainAllMsg()
          } else {
            this.$message({
              message: response.data.message,
              type: 'info',
            })
          }
        }).catch()
      },
      //进入培训管理页
      goTrain(trainId) {
        this.$router.push({
          path: '/user_train_skc/user_sign_up',
          query: {
            "trainId": trainId
          }
        });
      },
      fit() {},
    },
  }

</script>
